﻿<input type="text'" id="fav">
<script type="text/javascript">
 function Vue(){//一个自定义函数Vue 也是自定义对象Vue 
  this.fav;
  this.el=document.getElementById('fav');//定义el变量表示 当前的文本框的内容
  this.observe(this);//此处调用的目的是为了将标签和 js对象绑定，括号里的this代表vue的对象，自己调用了一个方法把自己传进去
  this.render();
 }

//Object是 js提供类的类（函数）.的定义属性的方法，改方法需要3个参数 分别 对象，属性名，属性的操作



Vue.prototype.observe = function(vue){//给某个类（函数）绑定一个方法 这个对象就可以在对象内部使用this来访问方法
var value;//需要再定义一个对象 来保存传递过来值，
//第二参数是 字符串 单个对象取 和 集合循环中取出来要注意区别
//
var  self = this;//如果当前的observe方法是个普通的js方法 this代表的是当前页面，而用propotype绑定的方法 this代表队vue对象（prototype，谁调用的prototype里面的this就是谁）
 Object.defineProperty(vue,"fav",{
   get:function(){
   	return value;//注意主要额外用一个保存了值 变量来操作，否则要引起递归 直接使用vue对象的fav属性无论是赋值还是取值都会激活get set
   },
   set:function(newValue){
   	console.log("set方法被调用");
    value = newValue;
    //console.log(self);
    self.render();//此处不能写this 因为这里的this代表的是vue

    //需要考虑清楚渲染方法找谁要 
    //console.log(this);
   }
 });
}

 function getCurrentFav(vue){//定时器调用这个方法 实现了 不断读取标签的最新值 并赋值给js对象，由于赋值给js对象又会调用set方法，而set方法又调用了渲染方法，能够保证无论是js修改 js对象的值 还是用户输入了文本框的值 双方都同步了
 	var fav = vue.el.value==='undefined'?'':vue.el.value;
 	vue.fav = fav;
 }

 Vue.prototype.render=function (){
 	this.el.value=this.fav;// 这个this代表当前vue对象，将js对象值 赋予对应的html元素的值
 }
   var vue = new Vue();//vue的对象 需要在类的生命完成之后再new出来，new早了少方法
 setInterval(function(){
   getCurrentFav(vue);
 },500);//定时器调用取值方法
</script>